<!--
 * @Author: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @Date: 2024-10-10 11:07:05
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-10-12 10:38:25
 * @FilePath: \ft-apply-admin\src\views\DataCenter\HRStatement\component\Pie.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="pie">
    <div class="chart" ref="chartsRef"></div>
  </div>
</template>
<script setup lang='ts'>
import { computed, ref, defineProps, onMounted, watch } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { getPieOptions } from './data';
const chartsRef = ref<HTMLDivElement | null>(null);
const props = defineProps(['list', 'target', 'label'])
const { setOptions } = useECharts(chartsRef);

watch(() => props.list, (val) => {
  if (val.length > 0) {
    initCharts()
  }
},{ deep: true })


const initCharts = () => {
  const list = props.list.map(el => {
    return {
      value: el.percent, name: el.text,number:el.number,color:el.color
    }
  })
  const { target, label } = props
  const option = getPieOptions(target, label, list)
  setOptions(option)
}
</script>

<style lang="less" scoped>
.chart {
  width: 220px;
  height: 220px;
}
</style>